import React, { useEffect, useState, useRef } from 'react'
import { Timeline } from 'antd'
import { useModel, useSearchParams } from '@umijs/max'

import styles from './ExpressQuery.less'

export default () => {
  const [searchParams] = useSearchParams()
  const { LookExpress } = useModel('Order')
  const [expressData, setExpressData] = useState({})
  const user_id = searchParams.get('user_id')
  const platform_id = searchParams.get('platform_id')
  const order_sn = searchParams.get('order_sn')

  useEffect(() => {
    if (platform_id && order_sn && user_id) {
      getExpressInfo()
    }
  }, [])

  const getExpressInfo = async () => {
    const res = await LookExpress({
      user_id,
      platform_id,
      order_sn
    });

    if (res) {
      res.timeLine = res.track.data.map(i => ({
        label: i.time,
        children: i.context
      }))
      setExpressData(res)
    }
  }


  return (
    <div className={styles.express_modal}>
      <div className={styles.express_title}>
        <div>快递公司：{expressData.company_name}</div>
        <div>快递单号：{expressData.number}</div>
      </div>
      <Timeline items={expressData.timeLine} />
    </div>
  )
}
